import React, { Component } from 'react';
// 类组件

// class Tab extends Component {
//   render() {
//     const { titles, handleChangeActiveIndex, activeIndex } = this.props
//     return (
//       <div className="navBar">
//         {
//           titles.length > 0 && titles.map((v, i) => {
//             return (
//               <b key={v.id} onClick={ () => handleChangeActiveIndex(i) } 
//                 className={ activeIndex === i ? 'active': '' }
//               >{ v.title }</b>
//             )
//           })
//         }
//       </div>
//     );
//   }
// }

// 函数组件
function Tab (props) {
  const { titles, handleChangeActiveIndex, activeIndex } = props

  return (
    <div className="navBar">
      {
        titles.length > 0 && titles.map((v, i) => {
          return (
            <b key={v.id} onClick={ () => handleChangeActiveIndex(i) } 
              className={ activeIndex === i ? 'active': '' }
            >{ v.title }</b>
          )
        })
      }
    </div>
  );
}

export default Tab;
